<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/1/11
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <%--<script src="jquery-2.1.0.js"></script>--%>
</head>
<body>
<%--搜索模块--%>
<div class="layui-form-item" style="padding: 10px">
    <form class="layui-form" id="sss" >
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" placeholder="请输入入库人名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn " lay-submit lay-filter="ssbtu">搜索</button>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
        </div>
    </form>
</div>
<%--详情模块--%>
<div id="addDeptDiv" style="display: none">
    <table id="test2" class="layui-hide"  lay-filter="test2" ></table>
    <form class="layui-form" lay-filter="xq" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" class="layui-input" readonly>
            </div>
        </div>
    </form>
</div>

<%--审核失败模块--%>
<div id="noCheckDiv" style="display: none">
    <form class="layui-form" lay-filter="no" >
        <input name="userid" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">禁用原因:</label>
            <div class="layui-input-inline">
                <%--<input type="text" name="cause" class="layui-input">--%>
                <textarea name="cause" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="addBtnRuku">确认</button>
                <button type="reset"  class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
            </div>
        </div>
    </form>
</div>

<%--头部工具栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

    </div>
</script>
<table id="test" class="layui-hide"  lay-filter="test" ></table>

<script type="text/html" id="barDemo">
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看原因</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="yes">解禁</a>
    {{#  } }}
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="no">禁用</a>
    {{#  } }}
</script>
<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form  = layui.form;
        function showtable(){
            table.render({
                elem:'#test'
                ,url:'${pageContext.request.contextPath}/yonghu/list'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: 't_ruku'
                ,cols: [[
                    {field:'userid', title:'用户ID', hide:true}
                    ,{field:'phone', title:'手机号'}
                    ,{field:'password', title:'密码'}
                    ,{field:'name', title:'用户名'}
                    ,{field:'cardID', title:'身份证号'}
                    ,{field:'address',title:'地址'}
                    ,{field:'status',title:'状态',templet:function (d){
                            if (d.status == 1){
                                return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">禁用</button>';
                            }else{
                                return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">使用</button>';
                            }
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:260}
                ]]
                ,page: true
                , even: true //开启隔行背景
                ,limit:5//每页显示的条数
                ,limits:[2,5,10,15,20]
            });
        }
        table.render({
            elem:'#test2'
            ,url:'${pageContext.request.contextPath}/yonghu/cause'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: 't_ruku'
            ,cols: [[
                {field:'id', title:'ID',hide:true}
                ,{field:'userid', title:'用户ID',hide:true}
                ,{field:'date', title:'时间'}
                ,{field:'cause', title:'原因'}
            ]]
            ,page: true
            ,even: true //开启隔行背景
        });
        //当页面整个加载完成时，执行的方法
        $(function(){
            showtable();
        })

        form.on('submit(ssbtu)',function (data){
            table.reload('test',{
                where:{
                    phone:data.field.phone,
                },
                page: {
                    curr:1
                }
            });
        });

        //不通过原因提交
        form.on('submit(addBtnRuku)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/yonghu/no',
                data:data.field,//当前表单的所有数据
                dataType: 'json',
                success:function (data){
                    layer.closeAll();
                    if (data == "1001"){
                        layer.msg("禁用成功",{icon:1});
                    }else {
                        layer.msg("禁用失败",{icon:5});
                    }
                    showtable();
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '查看原因'
                    ,maxmin: true
                    ,anim: 4
                    ,area:['700px','350px']
                    ,content: $("#addDeptDiv")
                });
                form.val("xq",data);

                table.reload('test2',{
                    where:{
                        userid:data.userid,
                    }
                });
            }else if (obj.event === 'yes'){
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/yonghu/yes',
                    data:{userid:data.userid},//当前表单的所有数据
                    dataType: 'json',
                    success:function (data){
                        layer.closeAll();
                        if (data == "1001"){
                            layer.msg("解禁成功",{icon:1});
                        }else {
                            layer.msg("解禁失败",{icon:5});
                        }
                        showtable();
                    }
                });
            }else if (obj.event === 'no'){
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '禁用原因'
                    ,maxmin: true
                    ,anim: 4
                    ,content: $("#noCheckDiv")
                });
                form.val("no",data);
            }
        });
    });
</script>
</body>
</html>
